<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>用户记事本</title>
</head>

<body>

  <div id="app">
    <div>{{title}}</div>

    <!-- 查询的表单 -->
    <div>
      标题模糊查询：<input type="text" v-model="queryInfo.title">
      内容模糊查询：<input type="text" v-model="queryInfo.info">
      <button @click="query()">查询</button>
      <button @click="showDeleteData">回收站</button>
    </div>

    <!-- 添加的表单 -->
    <div>
      标题：<input type="text" v-model="addInfo.title">
      内容：<input type="text" v-model="addInfo.info">
      <button @click="add">添加</button>
    </div>

    <hr>
    <!-- 数据显示 -->
    <table style="width: 100%;">
      <thead>
        <tr>
          <th>标题</th>
          <th>内容</th>
          <th>信息修改时间</th>
          <th>操作</th>
        </tr>
      </thead>

      <tbody>
        <tr v-for="d in list">
          <td>{{d.title}}--{{d.unid}}</td>
          <td>{{d.info}}</td>
          <td>{{d.lastupdate | formatDate}}</td>
          <td>
            <button @click="showModi(d)">修改</button>
            <button @click="del(d)">删除</button>
          </td>
        </tr>

      </tbody>


    </table>

    <!-- 分页的部分 -->
    <div>
      <a href="javascript:void(0)" @click="toPage(page.pageNumber-1)">上一页</a>
      |
      当前页/总页数/记录数：
      {{page.pageNumber}}/
      {{page.pageCount}}/
      {{page.total}}
      |
      <a href="javascript:void(0)" @click="toPage(page.pageNumber+1)">上一页</a>
    </div>

    <hr>
    <!-- 修改的部分 -->
    <div v-if="modifyVisible">
      标题：<input type="text" v-model="modifyInfo.title">
      内容：<input type="text" v-model="modifyInfo.info">
      <button @click="modify">保存</button>
      <button @click="modifyVisible=false;query();">关闭</button>
    </div>

    <!-- 回收站 -->
    <div v-if="deleteData.visible">
      {{deleteData.list}}
      <br>
      {{deleteData.page}}
    </div>
    <!-- {{list}}
    <br>
    {{page}}
    <br> -->
    {{message}}



  </div>

  <script src="../lib/vue.min.js"></script>
  <script src="../lib/axios.min.js"></script>
  <script src="../lib/qs.min.js"></script>
  <script src="../lib/spark-md5.min.js"></script>
  <script src="../js/ajax.js"></script>
  <script src="../js/filters.js"></script>

  <script src="js/notepad.js"></script>

</body>

</html>